<template>
  <div class="topst">
    <el-card class="card">
      <el-row>
        <el-col :span="24" class="col1">
          <img
            class="imgs"
            src="https://www.axured.cn/assets/axurefiles/cd1bba2356076c2843e405e9e753b8f7_942/images/%E8%AE%A2%E5%8D%95%E5%85%85%E5%80%BC/u3126.png"
          />
          <dl class="dls">
            <dd style="font-size: 20px">订单提交成功，请及时完成支付！</dd>
            <dt style="display: inline-flex; font-size: 20px">
              <span>请在</span
              ><el-countdown format="mm:ss" :value="value1" /><span
                >内完成支付，否则订单会自动关闭</span
              >
            </dt>
          </dl>
        </el-col>
        <el-col :span="24" style="margin-bottom: 1.5%">
          <span
            style="
              display: block;
              width: 100px;
              border-left: 3px solid blue;
              padding-left: 17px;
              margin-left: 2.8%;
            "
            >支付方式</span
          >
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="20">
          <el-radio-group v-model="radios">
            <el-radio label="1" size="large" border>支付宝支付</el-radio>
            <el-radio label="2" size="large" border>微信支付</el-radio>
          </el-radio-group>
        </el-col>
        <el-col
          :span="24"
          v-if="radios == '2'"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 260px;
          "
        >
          <span style="position: absolute; top: 0"
            >打开微信，扫一扫付款<b>{{ price }}</b
            >元</span
          >
          <img src="../../assets/wei630.jpg" width="200" />
          <img
            width="80"
            style="position: absolute; border-radius: 10px"
            src="https://www.axured.cn/assets/axurefiles/cd1bba2356076c2843e405e9e753b8f7_942/images/%E8%AE%A2%E5%8D%95%E5%85%85%E5%80%BC/u3138.png"
          />
        </el-col>
        <el-col
          :span="24"
          v-show="radios == '1'"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 260px;
          "
        >
          <span style="position: absolute; top: 0"
            >打开支付宝，扫一扫付款<b>{{ price }}</b
            >元</span
          >
          <img src="../../assets/wei630.jpg" width="200" />
          <img
            width="80"
            style="position: absolute; border-radius: 10px"
            src="https://www.axured.cn/assets/axurefiles/cd1bba2356076c2843e405e9e753b8f7_942/images/%E8%AE%A2%E5%8D%95%E5%85%85%E5%80%BC/u3134.png"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
const value1 = ref(Date.now() + 1000 * 60 * 15);
const radios = ref("1");
const route = useRoute();
const store = useStore();
let price = ref();
let meal = ref({});
onMounted(() => {
  price.value = route.query.price;
  console.log(store.state.order);
});
</script>

<style lang="less" scoped>
.topst {
  width: 100%;
  height: 90%;
  overflow: hidden;

  .card {
    width: 95%;
    height: 94%;
    margin: 0 auto;
    margin-top: 1.3%;

    .col1 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 160px;

      .dls,
      .imgs {
        display: inline-block;
        vertical-align: middle;
        margin-right: 1%;
      }
    }
  }
}
</style>
